<template>
  <div ref="mapEl" class="provinceMap">
    
  </div>
</template>

<script>
import * as echarts from 'echarts';
import provinceJson from '@/views/cpage/maps/province.js'

export default {
  name:'provinceMap',
  props: {
    name:{
      type: String,
      default:''
    },
    data: {
			type: Array,
			default: function () {
				return []
			}
		}
  },
  computed: {
    // chartData(){
    //   var sfs = [
    //     '北京','天津','上海','重庆',
    //     '河北','河南','云南','辽宁','黑龙江','湖南','安徽','山东',
    //     '新疆','江苏','浙江','江西','广西','湖北','甘肃','山西','内蒙古',
    //     '陕西','吉林','福建','贵州','广东','青海','西藏','四川','宁夏',
    //     '海南','台湾','香港','澳门','南海诸岛',
    //   ]
    //   sfs = sfs.map(item=>({
    //     name:item,
    //     num:-1,
    //     value:-1,
    //     index:-1
    //   }))
		// 	if(!this.data||this.data.length<1){
		// 		return sfs;
    //   }
    //   var len = this.data.length;
		// 	this.data.forEach(function(item,index){
    //     for(var i=0;i<sfs.length;i++){
    //       if(item.regions.indexOf(sfs[i].name)!=-1){
    //         sfs[i].value=(len-index);
    //         sfs[i].num=item.nowNumber;
    //         sfs[i].index=index+1;
    //         break;
    //       }
    //     }
		// 	})
		// 	return sfs;
    // }
    chartData(){
      var temp = [];
      if(!this.name){
        return temp;
      }
      var areas = provinceJson[this.name].features.map(function(item){
        return item.properties.name;
      })
      temp = areas.map(function(item){
        var num = parseInt(Math.random()*140-20);
        return {
          name:item,
          num:num,
          value:num
        }
      })
      return temp;
    }
  },
  watch: {
    chartData(){
      if(this.chart){
        this.paintChart() 
      }
    },
  },
  data() {
    return {
      chart: null,
      chartTimer: null,
      colors:['#a6a6a6','#66a861','#a7c86d','#fff96f','#db483e']
    };
  },
  mounted(){
    this.initChart();
    setTimeout(()=>{
      this.paintChart()
    })
  },
  methods: {
    resize(){
      this.chart.resize();
    },
    initChart(){
      this.chart = echarts.init(this.$refs.mapEl);
    },
    paintChart(){
      if(!this.name){
        return;
      }
      clearTimeout(this.chartTimer)
      if(!echarts.getMap(this.name)){
        console.log('newmap')
        echarts.registerMap(this.name,provinceJson[this.name]);
      }
      this.chartTimer= setTimeout(() =>{
        if(!this.chart){
          return;
        }
        let that = this;
        let option = {
          backgroundColor:'#f2f2f2',
          tooltip: {
            // triggerOn: "click",   //mousemove、click
            padding:8,
            borderWidth:1,
            borderColor:'#409eff',
            backgroundColor:'rgba(255,255,255,0.7)',
            textStyle:{
              color:'#000000',
              fontSize:14
            },
            formatter: function(e, t, n) {
              let data = e.data;
              let context = '';
              try {
                context += '<div><p><b style="font-size:15px;">'+data.name+'</b></p>';
                if(data.num>-1){
                  context+='<p class="tooltip_style"><span>'+data.num+'%</span></p>'
                }
                context+='</div>'
              } catch (error) {
                
              }
              return context;
            }
          },
          visualMap: {
            show:true,
            left: 10,
            bottom: 20,
            itemWidth:20,
            itemHeight:14,
            showLabel:true,
            textStyle:{
              color:'#333333',
              fontSize:14
            },
            pieces: [
              {min: 0, max: 39, label: '<40', color: that.colors[4]},
              {min: 40, max: 79, label: '40-79', color: that.colors[3]},
              {min: 80, max: 99, label: '80-99', color: that.colors[2]},
              {min: 99, label: '>=100', color: that.colors[1]},
              {max: 0, label: '无经销商', color: that.colors[0]}
            ]
          },
          geo: {
            map: that.name,
            scaleLimit: {
              min: 1,
              max: 2
            },
            zoom: 1,
            top:6,
            bottom:6,
            label:{
              show:true,
              fontSize:14,
              // fontWeight:'bold',
              color:'#333333',
              // textBorderColor:'#333333',
              // textBorderWidth:1,
              // formatter:function(data){
              //   var name = data.name;
              //   var selItem = that.chartData.filter(function(item){
              //     return item.name == name
              //   })
              //   if(selItem.length>0&&selItem[0].index!=-1){
              //     return selItem[0].name
              //   }
              //   return ''
              // }
            },
            itemStyle: {
              areaColor:'#ff0000',
              borderWidth:1,
              borderColor: "#fefefe",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
            },
            emphasis: {
              itemStyle:{
                //04317a
                areaColor:'#6dbef3',
                borderColor:'#ff0000',
              }
            },
            select: {
              itemStyle:{
                //04317a
                areaColor:'#6dbef3',
                borderColor:'#ff0000',
              }
            }
          },
          series: [
            {
              name: "区域销量",
              type: "map",
              geoIndex: 0,
              data:that.chartData
            }
          ]
        }
        this.chart.setOption(option);
        // this.chart.on('click', function (params) {
        //   params.event.stop();
        //   if (params.componentSubType === 'effectScatter') {
        //     console.log('click',params);
        //   }
        //   return false;
        // })
        this.chart.on('mouseover', function (params) {
          if(params&&params.data&&params.data.num == -1){
            params.event.stop();
          }
        })
        setTimeout(function(){
          that.chart.resize()
        },200)
      },300)
    }
  }
};
</script>